<template>
  <div>
    父应用的值 name:{{ state.name }} <br />
    父应用的值 age:{{ state.age }} <br />
    <br />
    <button @click="change">改变父应用的值</button>
    <br />
    <br />
    <button @click="goMain">去主应用</button>
  </div>
</template>

<script setup>
import { qiankunWindow } from 'vite-plugin-qiankun/es/helper'

import { reactive, onMounted, getCurrentInstance } from 'vue'
import actions from '../actions'

const { proxy } = getCurrentInstance()
const state = reactive({
  name: '',
  age: ''
})

/* 两种方案都可以 */
if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  proxy.$onGlobalStateChange(parentState => {
    state.name = parentState.name
    state.age = parentState.age
  }, true)
}
// actions.onGlobalStateChange(parentState => {
//   state.name = parentState.name
//   state.age = parentState.age
// }, true)

const change = () => {
  proxy.$setGlobalState({ name: '李四', age: 20 })
  // actions.setGlobalState({ name: state.name, age: state.age })
}
const goMain = () => {
  proxy.$parentRouter.push('/main')
}
</script>
<style scoped></style>
